<template>
    <div>
        <!-- seach区域 -->
        <div class="seach">
            <span class="SUP">
                <span class="seachCSC">
                    {{$t('mertnam')}}
                    <el-input v-model.trim="notPayForm.merName" :placeholder="$t('plsipt')" size="mini"></el-input>
                </span>
                <span class="seachStatus">
                    {{$t('payttim')}}
                    <el-date-picker :placeholder="$t('plsset')" v-model="nottime" width="20%" type="daterange" :range-separator="$t('to')" :start-placeholder="$t('startdate')" :end-placeholder="$t('dateclosed')" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="mini"></el-date-picker>
                </span>
            </span>
            <div class="NOUS">
                <el-button type="primary" @click="seachNotpay" size="mini" v-preventReClick>{{$t('qury')}}</el-button>
                <el-button type="success" @click="exportExcel" size="mini" v-preventReClick>{{$t('expot')}}</el-button>
            </div>
        </div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="notPayTab" id="out-table">
                <el-table-column type="index" :label="$t('sernum')">
                </el-table-column>
                <el-table-column prop="merName" :label="$t('mertnam')" min-width="81">
                </el-table-column>
                <el-table-column prop="bankCardShortNo" :label="$t('colctacc')" min-width="132">
                </el-table-column>
                <el-table-column prop="batchNo" :label="$t('batchNo')" min-width="162">
                </el-table-column>
                <el-table-column prop="bankName" :label="$t('bankname')" min-width="91">
                </el-table-column>
                <el-table-column prop="auditStatus" :label="$t('audsta')" min-width="97">
                </el-table-column>
                <el-table-column prop="status" :label="$t('remitsta')" min-width="143">
                </el-table-column>
                <el-table-column prop="settleAmt" :label="$t('amtofpayt')" min-width="158">
                </el-table-column>
                <el-table-column prop="settlePayType" :label="$t('payrmethd')" min-width="128">
                </el-table-column>
                <el-table-column prop="settleCount" :label="$t('setlnum')" min-width="89">
                </el-table-column>
                <el-table-column prop="address" :label="$t('opratn')" width="140" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" v-if="scope.row.auditStatus !== $t('passed') && scope.row.auditStatus !== $t('tobeaud') && scope.row.settlePayType === $t('manlpaymentsett')" @click="showSubmit(scope.row)">{{$t('manlpaymentsett')}}</el-link>
                        <el-link type="primary" @click="details(scope.row)">{{$t('detls')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="notPayForm.pageNum"
                :page-sizes="[10, 15, 20, 30]"
                :page-size="notPayForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
        <el-dialog :title="$t('submitatask')" :visible.sync="payDialogVisible" width="30%" @close="payDialogVisibleClosed(submitpayForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
            <el-form :ref="submitpayForm" :rules="submitpayFormRul" :model="submitpayForm" label-width="80px" :hide-required-asterisk="true">
                 <el-form-item :label="$t('remk')" prop="remark">
                    <el-input v-model.trim="submitpayForm.remark" :placeholder="$t('plsipt')"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="commit(submitpayForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="payDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getsettlewaitpaylist,
    submitpaymentman
} from '@/libs/reqlist.js'
import { getInitDate } from '@/libs/getDate.js'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
    data () {
        return {
            isOk: false,
            total: 0,
            nottime: [],
            notPayForm: {
                merId: '',
                merName: '',
                orderParamIdx: 0,
                orderType: 0,
                settlePayType: '',
                transEndTime: '',
                transStartTime: '',
                pageNum: 1,
                pageSize: 10
            },
            notPayTab: [],
            payDialogVisible: false,
            submitpayFormRul: {
                remark: [
                    { required: true, message: this.$t('notecantbeemt'), trigger: 'blur' }
                ]
            },
            submitpayForm: {
                applyType: 'SUBMIT_SETTLE_PAY',
                batchNo: 0,
                merId: 0,
                merName: '',
                remark: '',
                sysUserName: '',
                bankCardShortNo: '',
                bankName: '',
                settleAmt: '',
                settleCount: '',
                settleDate: '',
                settlePayType: ''
            }
        }
    },
    methods: {
        getNotPayList() {
            getsettlewaitpaylist(JSON.stringify(this.notPayForm)).then(res => {
                if (res.data.code === '000000') {
                    this.total = res.data.data.total - 0
                    for (let i = 0; i < res.data.data.list.length; i++) {
                        let item = res.data.data.list[i]
                        if (item.settlePayType === 'AUTO') item.settlePayType = this.$t('automaticmon')
                        if (item.settlePayType === 'MANUAL') item.settlePayType = this.$t('manlpaymentsett')
                        if (item.settlePayType === 'WITHDRAW') item.settlePayType = this.$t('selfhelpwith')
                        if (item.auditStatus === 'WAITCONFIRM') item.auditStatus = this.$t('tobeaud')
                        if (item.auditStatus === 'WAIT_SUBMIT') item.auditStatus = this.$t('tosubmit')
                        if (item.auditStatus === 'SUCCESS') item.auditStatus = this.$t('passed')
                        if (item.auditStatus === 'REJECT') item.auditStatus = this.$t('reject')
                        if (item.status === 0) item.status = this.$t('sett')
                        if (item.status === 1) item.status = this.$t('setttobepaid')
                        if (item.status === 2) item.status = this.$t('alredypaid')
                        if (item.status === 3) item.status = this.$t('failpaymentagn')
                        if (item.status === 4) item.status = this.$t('paying')
                    }
                    this.notPayTab = res.data.data.list
                }
            })
        },
        seachNotpay() {
            if (this.nottime !== null) {
                this.notPayForm.transEndTime = this.nottime[1]
                this.notPayForm.transStartTime = this.nottime[0]
                this.notPayForm.transEndTime = this.notPayForm.transEndTime.split('-').join('')
                this.notPayForm.transStartTime = this.notPayForm.transStartTime.split('-').join('')
            }
            if (this.nottime === null) {
                this.notPayForm.transEndTime = null
                this.notPayForm.transStartTime = null
            }
            this.notPayForm.pageNum = 1
            this.getNotPayList()
        },
        handleSizeChange (newSize) {
            this.notPayForm.pageSize = newSize
            this.getNotPayList()
        },
        // 监听总页数变化
        handleCurrentChange (newNum) {
            this.notPayForm.pageNum = newNum
            this.getNotPayList()
        },
        showSubmit (data) {
            this.submitpayForm.batchNo = data.batchNo
            this.submitpayForm.merId = data.merId
            this.submitpayForm.merName = data.merName
            this.submitpayForm.sysUserName = window.localStorage.getItem('username')
            this.submitpayForm.bankCardShortNo = data.bankCardShortNo
            this.submitpayForm.bankName = data.bankName
            this.submitpayForm.settleAmt = data.settleAmt
            this.submitpayForm.settleCount = data.settleCount
            this.submitpayForm.settleDate = data.settleDate
            this.submitpayForm.settlePayType = data.settlePayType
            this.submitpayForm.sysUserName = window.localStorage.getItem('username')
            this.payDialogVisible = true
        },
        commit (form) {
            this.$refs[form].validate(async valid => {
                if (!valid) return
                if (this.submitpayForm.settlePayType === this.$t('automaticmon')) this.submitpayForm.settlePayType = 'AUTO'
                if (this.submitpayForm.settlePayType === this.$t('manlpaymentsett')) this.submitpayForm.settlePayType = 'MANUAL'
                if (this.submitpayForm.settlePayType === this.$t('selfhelpwith')) this.submitpayForm.settlePayType = 'WITHDRAW'
                submitpaymentman(JSON.stringify(this.submitpayForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.payDialogVisible = false
                        this.$message({
                            message: this.$t('submitsuc'),
                            type: 'success'
                        })
                        this.getNotPayList()
                    }
                    if (res.data.code === '992127') {
                        this.payDialogVisible = false
                        this.$message.error(this.$t('thismerprosub'))
                    }
                    if (res.data.code === '992107') {
                        this.payDialogVisible = false
                        this.$message.error(this.$t('thetaskisbe'))
                    }
                })
            })
        },
        payDialogVisibleClosed (form) {
            this.$refs[form].resetFields()
        },
        // 导出函数
        exportExcel () {
            let fix = document.querySelector('.el-table__fixed-right')
            let xlsxParam = { raw: true }
            /* generate workbook object from table */
            let wb
            if (fix) {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix), xlsxParam)
                document.querySelector('#out-table').appendChild(fix)
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector('#out-table'), xlsxParam)
            }
            /* get binary string as output */
            let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream;charset=utf-8' }), '打款记录.xlsx')
            } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
            return wbout
        },
        details (data) {
            window.sessionStorage.setItem('notpay', JSON.stringify(data))
            this.$router.push('/sec/notpaydet')
        }
    },
    mounted () {
        this.notPayForm.transEndTime = getInitDate(0, 0).split('-').join('')
        this.notPayForm.transStartTime = getInitDate(7, 0).split('-').join('')
        this.nottime.push(getInitDate(7, 0))
        this.nottime.push(getInitDate(0, 0))
        this.getNotPayList()
    }
}
</script>

<style lang="less" scoped>
@import './notpay.less';
</style>
